<template>
  <div class="property-panel">
    <div class="title">工序属性</div>
    <div class="title-sub">{{ sectionName }}</div>
    <div class="property-content">
      <!-- 关联设备 -->
      <div class="item-title">
        <span>关联设备</span>
        <el-button type="text" @click="handleAddEquip">添加</el-button>
      </div>
      <div v-for="equip in equipList" :key="equip.id" class="item">
        <span>{{ equip.equipName }}</span>
        <span class="del-item-btn" @click="handleDeleteEquip(equip)">
          <i class="el-icon-close"></i>
        </span>
      </div>
      <!-- 关联工位 -->
      <div class="item-title">
        <span>关联工位</span>
        <el-button type="text" @click="handleAddStation">添加</el-button>
      </div>
      <div v-for="station in stationList" :key="station.id" class="item">
        <span>{{ station.workStationName }}</span>
        <span class="del-item-btn">
          <i class="el-icon-close" @click="handleDeleteStation(station)"></i>
        </span>
      </div>
    </div>

    <!-- 设备列表 -->
    <EquipList
      :visible.sync="equipListDialog.visible"
      :defaultValues="equipListDialog.defaultValues"
      :defaultSearch="{
        factoryDeptCode: form.factoryDeptCode,
        workshopId: form.workshopId,
        workshopCode: form.workshopCode,
        lineId: form.lineId,
      }"
      :multiple="true"
      :disabledSearch="{
        factory: true,
        workshop: true,
        line: true,
        value: false,
      }"
      @closeDialog="handleEquipListClose"
    ></EquipList>
    <!-- 工位列表 -->
    <StationList
      :visibles.sync="stationDialog.visible"
      :defaultValues="stationDialog.defaultValues"
      :arrData="{
        factoryDeptCode: form.factoryDeptCode,
        workshopId: form.workshopId,
        workshopCode: form.workshopCode,
        lineId: form.lineId,
      }"
      :multiple="false"
      :disabledData="{
        factory: true,
        workshop: true,
        line: true,
        workSection: true,
      }"
      @closeDialog="closeStationDialog"
    >
    </StationList>
  </div>
</template>
<script>
import EquipList from "@/views/components/equipList";
import StationList from "@/views/components/stationList";
export default {
  components: { EquipList, StationList },
  props: {
    lf: Object,
    form: {
      type: Object,
      default: () => ({}),
    },
    currentNode: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      equipList: [],
      stationList: [],
      equipListDialog: {
        visible: false,
        defaultValues: [],
      },
      stationDialog: {
        visible: false,
        defaultValues: [],
      },
    };
  },
  computed: {
    sectionName() {
      return this.currentNode?.properties?.workSectionName || "";
    },
  },
  methods: {
    // 添加设备按钮操作
    handleAddEquip() {
      this.equipListDialog.defaultValues = [...this.equipList];
      this.equipListDialog.visible = true;
    },
    // 设备列表关闭，赋值
    handleEquipListClose(list) {
      this.equipList = list;
      this.updateEquipProperties();
    },
    // 删除设备按钮操作
    handleDeleteEquip(equip) {
      this.equipList = this.equipList.filter((ele) => ele.id != equip.id);
      this.updateEquipProperties();
    },
    // 更新节点的设备
    updateEquipProperties() {
      const oriProperties = this.currentNode;
      this.lf.setProperties(this.currentNode.id, {
        ...oriProperties,
        equipmentList: this.equipList,
      });
    },
    // 添加设备按钮操作
    handleAddStation() {
      this.stationDialog.defaultValues = this.stationList.map((ele) => ({
        ...ele,
        workStationId: ele.id,
      }));
      this.stationDialog.visible = true;
    },
    // 设备工位关闭，赋值
    closeStationDialog(list) {
      this.stationList = list.map((ele) => ({ ...ele, id: ele.workStationId }));
      this.updateStationProperties();
    },
    // 删除工位按钮操作
    handleDeleteStation(station) {
      this.stationList = this.stationList.filter((ele) => ele.id != station.id);
      this.updateStationProperties();
    },
    // 更新节点的工位
    updateStationProperties() {
      const oriProperties = this.currentNode;
      this.lf.setProperties(this.currentNode.id, {
        ...oriProperties,
        workStationList: this.stationList,
      });
    },
  },
  watch: {
    currentNode: {
      handler(newVal) {
        if (newVal) {
          this.equipList = newVal.properties?.equipmentList || [];
          this.stationList = newVal.properties?.workStationList || [];
        } else {
          this.equipList = [];
          this.stationList = [];
        }
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.property-panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
  height: 100%;
  z-index: 10;
  background: #ffffff;
  padding: 4px 10px 10px;
  .title {
    height: 40px;
    line-height: 40px;
    font-weight: 600;
    text-align: center;
    border-color: #a5a5a5;
  }
  .title-sub {
    text-align: center;
    color: #999;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .item-title {
    line-height: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
  }
  .property-content {
    height: calc(100% - 40px - 24px);
    overflow: auto;
    /* 整个滚动条 */
    &::-webkit-scrollbar {
      /* 对应纵向滚动条的宽度 */
      width: 5px;
      /* 对应横向滚动条的宽度 */
      height: 5px;
    }

    /* 滚动条上的滚动滑块 */
    &::-webkit-scrollbar-thumb {
      background-color: #d1d1d1;
      border-radius: 5px;
    }

    /* 滚动条轨道 */
    &::-webkit-scrollbar-track {
      background-color: #f5f5f5;
      border-radius: 5px;
    }
  }
  .item {
    height: 28px;
    line-height: 28px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 0 10px;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
    background: #eaf8fe;
    color: #409eff;
  }
  .del-item-btn {
    margin-left: 10px;
    cursor: pointer;
  }
}
</style>
